<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像拼接工具</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>图像拼接工具</h1>
            <p class="subtitle">上传两张图片，自动生成全景图像</p>
        </header>

        <div class="main-content">
            <div class="drop-area-container">
                <div class="drop-area" id="drop-area-1" data-index="1">
                    <div class="drop-content">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                        </svg>
                        <h3>图片 1</h3>
                        <p>拖放图片到这里或</p>
                        <button class="browse-btn">选择文件</button>
                        <input type="file" class="file-input" accept="image/*">
                    </div>
                    <img class="preview-image" src="" alt="">
                </div>

                <div class="drop-area" id="drop-area-2" data-index="2">
                    <div class="drop-content">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                        </svg>
                        <h3>图片 2</h3>
                        <p>拖放图片到这里或</p>
                        <button class="browse-btn">选择文件</button>
                        <input type="file" class="file-input" accept="image/*">
                    </div>
                    <img class="preview-image" src="" alt="">
                </div>
            </div>

            <div class="action-buttons">
                <button class="stitch-btn" id="stitch-btn" disabled>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M21 3H3C1.9 3 1 3.9 1 5v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zm-10-7h9v6h-9z"/>
                    </svg>
                    开始拼接
                </button>
                <button class="reset-btn" id="reset-btn">重置</button>
            </div>

            <div class="result-container" id="result-container">
                <h2>拼接结果</h2>
                <img class="result-image" id="result-image" src="" alt="拼接结果">
                <button class="download-btn" id="download-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                    </svg>
                    下载图片
                </button>
            </div>
        </div>
    </div>

    <div class="loading-overlay" id="loading-overlay">
        <div class="spinner"></div>
        <p class="loading-text">正在拼接图像...</p>
    </div>

    <div class="notification" id="notification">
        <svg class="success-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
        </svg>
        <svg class="error-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="display: none;">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
        </svg>
        <span id="notification-message"></span>
    </div>

    <script src="js/main.js"></script>
</body>
</html>